<template>
    <div>
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" @click="onClickLeft" style="height: 40rem;left: 20rem;top: 7rem;"
                src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">输入核销码</p>
        </div>
        <div class="box-center pr " :style="styleStr">
            <p>输入核销码</p>
            <input style="padding-left: 30rem;box-sizing: border-box;margin-left: 15rem;" type="text" name="" v-model="cancel">
            <button type="button" class="elbtn" @click="onSubmit">识别</button>
        </div>
        <div class="main pr" v-if="isShow" style="margin: 20rem 20rem 0;">
            <h2>核销码<span>{{ order.verification }}</span></h2>
            <div class="text item">
                <h2>服务内容</h2>
                <p>XXX标准洗车服务包含</p>
                <p>整车泡沫冲洗擦干</p>
                <p>轮胎轮毂冲洗清洁</p>
                <p>车内吸尘</p>
                <p>内饰脚垫简单除尘</p>
                <p>(不包含炉、水泥、沥青和顽固污渍清理等)</p>
            </div>
            <div class="text">
                <h2>订单信息</h2>
                <p>订单价格: {{ order.originPrice }}</p>
                <p>实付金额: <span style="font-weight: bolder;">{{ order.currentPrice }}</span></p>
                <p>优惠金额: ￥{{ order.discount }}</p>
                <p>订单编号: {{ order.orderCode }}</p>
                <p>支付时间: {{ order.createdDate }}</p>
                <p>预约时间: {{ order.bookingTime }}</p>
            </div>
        </div>
        <div class="btn" v-if="isShow">
            <button :disabled="isDisabled" :style="iscancelbg" @click="cencelBtn">{{ iscancel }}</button>
        </div>
    </div>
</template>
  
<script>
import { order, scanVerification } from '../../api/index'
import { Field, Button, Dialog, Form ,Notify} from 'vant';
import 'vant/lib/notify/style';
import 'vant/lib/field/style';
import 'vant/lib/dialog/style';
export default {
    components: {
        Field, Button, Form
    },
    data() {
        return {
            styleStr:'',
            isShow: false,
            cancelCode: '',
            //判断按钮是否禁用
            isDisabled: false,
            //修改按钮背景色
            iscancelbg: false,
            iscancel: '确认核销',
            cancel: '',
            order: {
                originPrice: '',
                currentPrice: '',
                discount: '',
                orderCode: '',
                createdDate: '',
                bookingTime: '',
                verification: ''
            }

        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        validator(val) {
            return val != ''
        },
        //识别
        onSubmit() {
            console.log(this.cancel);
            if (!this.cancel) {
                Notify({message:'请输入搜索内容',type: 'danger'})
            } else {
                scanVerification({ verification: this.cancel })
                    .then(r => {
                        console.log(r);
                        if (r.data == "已完成") {
                            order({
                                verification: this.cancel
                            })
                                .then(r => {
                                    this.order = r.data
                                    this.order.bookingTime = this.onDate(r.data.bookingTime)
                                    this.order.createdDate = this.onDate(r.data.createdDate)
                                    this.styleStr = 'padding-bottom:0;'
                                })
                            this.isShow = true
                        } else {
                            Notify('无此核销码')
                        }
                    })

            }
        },
        onDate(r) {
            const date = new Date(r);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        //确认核销
        cencelBtn() {
            Dialog.confirm({
                title: '核销此订单',
                message: '请您仔细核对订单，此操作不可撤销\n请谨慎操作!',
                confirmButtonText: '确认',
                confirmButtonColor: '#2377F3',
                cancelButtonText: '取消',
                cancelButtonColor: '#F2F2F2',
                theme: 'round-button',

            })
                .then(() => {
                    this.isDisabled = true
                    //按钮灰色
                    this.iscancelbg = 'background-color: #808080;'
                    //改变文字
                    this.iscancel = '已核销'
                })
                .catch(() => {

                });
        }
    }
}
</script>
<style scoped>
/* >>>.van-field__control {
    border: 1px solid #333;
}

>>>.el-button--primary.is-disabled:hover {
    background-color: #808080;
} */

.box-center {
    margin: -292rem 20rem 0 20rem;
    border-radius: 20rem;
    display: flex;
    font-size: 25rem;
    align-items: center;
    height: 160rem;
    background-color: #fff;
    padding: 0 30rem;
    padding-bottom: 1032rem;
}

.box-center p {
    color: #176CED;
}

.box-center input {
    height: 73rem;
    width: 510rem;
    border: 2rem solid #EDEDED;
    border-radius: 40rem;
}

.elbtn {
    width: 130rem;
    height: 65rem;
    position: absolute;
    right: 35rem;
    border: none;
    border-radius: 40rem;
    color: #fff;
    background-color: #2E80F9;
}

.main{
    background-color: #fff;
    padding: 49rem 27rem 12rem 28rem;
    border-radius: 20rem;
}
.main>h2{
    text-align: center;
    padding-bottom: 28rem;
    border-bottom: 7rem solid #f7f7f7;
    margin-bottom: 30rem;
}
.main>h2 span{
    font-size: 32rem;
    font-weight: normal;
    margin-left: 14rem;
}
.main h2{
    font-size: 32rem;
    line-height: 32rem;
}
.main div h2{
    margin-bottom: 40rem;

}
.main p{
    font-size: 24rem;
    line-height: 24rem;
    margin-bottom: 37rem;
}
.main .item{
    border-bottom: 7rem solid #f7f7f7;
    margin-bottom: 47rem;
}

.btn{
    display: flex;
    justify-content: center;
    margin-top: 60rem;
    margin-bottom: 147rem;
}
.btn button {
    color: #fff;
    width: 520rem;
    height: 70rem;
    line-height: 10rem;
    background-color: #0662e6;
    border-radius: 40rem;
    font-size: 26rem;
    border: none;
}
</style>
  